{{define "article-comment.list" }}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>文章评论列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/statics/third-pkg/layui/css/layui.css">
  <link rel="stylesheet" href="/statics/admin/css/public.css" media="all">
  <link rel="stylesheet" href="/statics/admin/js/lay-module/soulTable/soulTable.css">
</head>

<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">文章名称</label>
              <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-normal" lay-submit
                      lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn layui-btn-danger data-delete-btn" lay-event="delete"> 批量删除</button>
      </div>
    </script>

    <table id="myTable" ></table>


    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="">禁言</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="">回复</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>
<script src="/statics/third-pkg/layui/layui.js"></script>
<script src="/statics/admin/js/lay-config.js?v=2.0" charset="utf-8"></script>
<script>
  layui.use(['form', 'layer', 'request',"table",'soulTable'], function () {
    var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            request = layui.request,
            table = layui.table,
            soulTable = layui.soulTable;
    /**
     * 事项表展开后的子表配置
     * @param {any} row
     */



    var childTable = function (row) {
      var col = childColsData(row);
      return [
        {

          title: "子评论:"+row.id
          ,url: '/admin/article-comment/list-data'
          ,height: 500
          ,method:"POST"
          ,page: true
          , overflow: 'tips'
          , filter: {
            bottom: false
          }
          ,where:{
            pid:row.id
          }
          , cols: col
          , done: function (res) {
            soulTable.render(this);
          }
        }
      ]
    }

    /**
     * 逻辑子表的列设置
     * @param {any} row
     */
    var childColsData = function (row) {
      return [[{
        title: '#', width: 50,  isChild: function(row){
          // row 为当前行数据，根据返回结果控制是否展示子表入口
          return row.is_children === 1
        },children: function (row) {
          var arr = childLogicTable(row);
          return arr;
        }
      },
        {field: 'content', title: '内容', width: 123,},
        {field: 'username', title: '用户', width: 165 , templet:function (d) {
            if(d.author_type==1){
              html="类型:后台管理员"
            }else{
              html="类型:前台用户"
            }
            html+="</br>名称:"+d.username;
            return html;
          }},
        {field: 'upvote_count', title: '点赞数', width: 112,   sort:true},
        {field: 'downvote_count', title: '点踩数', width: 112,  sort:true},
        {field: 'created_at', title: '创建时间', width: 165},
        {title: '操作', templet: '#currentTableBar'}
      ]];
    }
    /**
     * 无限级子表的设置
     * @param {any} row
     */

    var childLogicTable = function (row) {
      var col = childColsData(row);
      var title = "子评论："+row.id;
      return [
        {
          title: title,
          url: '/admin/article-comment/list-data'
          ,height: 500
          ,method:"POST"
          ,page: true
          , overflow: 'tips'
          , filter: {
            bottom: false
          }
          ,where:{
            pid:row.id
          }
          , cols: col
          , done: function () {
            soulTable.render(this);
          }
        }
      ]
    }

    table.render({
      elem: '#myTable'
      ,url: '/admin/article-comment/list-data'
      ,height: 500
      ,method:"POST"
      ,page: true
      ,where:{
        pid:0
      }
      ,cols: [[
        {title: '#', width: 50, fixed: 'left', isChild: function(row){
            // row 为当前行数据，根据返回结果控制是否展示子表入口
            return row.is_children === 1
          },children: function (row) {
            return childTable(row);
          }},
        {field: 'article_name', title: '文章标题', width: 200},
        {field: 'content', title: '内容', width: 123,},
        {field: 'username', title: '用户', width: 165 ,templet:function (d) {
            if(d.author_type==1){
              html="类型:后台管理员"
            }else{
              html="类型:前台用户"
            }
            html+="</br>名称:"+d.username;
            return html;
          }},
        {field: 'upvote_count', title: '点赞数', width: 112, sort:true},
        {field: 'downvote_count', title: '点踩数', width: 112, sort:true},
        {field: 'created_at', title: '创建时间', width: 165},
        {title: '操作', templet: '#currentTableBar'}
      ]]
      ,done: function () {
        soulTable.render(this)
      }
    });


    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        },
        where: data.field
      }, 'data');

      return false;
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
       if (obj.event === 'delete') { // 监听删除操作
        var checkStatus = table.checkStatus('currentTableId'),
                data = checkStatus.data;
        layer.confirm('确定批量删除这些分类吗，个数为'+data.length, function (index) {
          var ids=data.map(function (item){
            return item.id
          }).join(',')
          if(!ids){
            layer.msg("至少选择其中一个分类")
          }
          request.delete("/admin/article-category/batch-del?ids="+ids).then((res)=>{
            if(res.status==204){
              layer.msg("批量删除文章分类成功成功",{
                time:1000
              },function (){
                //执行搜索重载
                table.reload('currentTableId', {
                  page: {
                    curr: 1
                  },
                  where: data.field
                }, 'data');
              })
            }else{
              layer.msg(res.data.msg)
            }
          }).catch((err)=>{
            layer.msg(err)
          })

          layer.close(index);
        });
      }
    });
    window.addEventListener("storage", function (e) {
      var item = localStorage.getItem("article-category");
      if(item){
        //执行搜索重载
        table.reload('currentTableId', {
          page: {
            curr: 1
          },
        }, 'data');
      }

    });
    //监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });

    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {

        var index = layer.open({
          title: '编辑用户',
          type: 2,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['100%', '100%'],
          content: '/admin/article-category/edit?id=' + data.id,
        });
        return false;
      } else if (obj.event === 'delete') {
        layer.confirm('确定删除当前用户吗', function (index) {
          request.delete("/admin/article-category/del?id="+data.id).then((res)=>{
            if(res.status==204){
              layer.msg("删除用户成功",{
                time:1000
              },function (){
                obj.del();
              })
            }else{
              layer.msg(res.data.msg)
            }
          }).catch((err)=>{
            layer.msg(err)
          })

          layer.close(index);
        });
      }
    });

  });
</script>

</body>

</html>

{{end}}